<template>
	<div>
		<div class="department-management">
			<!-- 部门信息和修改功能 -->
			<div class="left-section">
				<el-card class="info-card">
					<div slot="header" style="margin-bottom: 30px">
						部门信息
					</div>
					<el-form :model="departmentInfo" label-width="100px" ref="departmentForm" :disabled="!isEdit">
						<el-form-item label="部门编号">
							<el-input v-model="departmentInfo.did" disabled></el-input>
						</el-form-item>
						<el-form-item label="部门名称">
							<el-input v-model="departmentInfo.dname" :disabled="!isEdit"></el-input>
						</el-form-item>
						<el-form-item label="登录密码">
							<el-input v-model="departmentInfo.dpassword" disabled></el-input>
						</el-form-item>
						<el-form-item label="部门负责人">
							<el-input v-model="departmentInfo.dmanager" :disabled="!isEdit"></el-input>
						</el-form-item>
						<el-form-item label="部门负责人电话">
							<el-input v-model="departmentInfo.dphone" :disabled="!isEdit"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" @click="isEdit = !isEdit"
										 style="float: right; margin-right: 150px; margin-bottom: 60px">
						{{ isEdit ? '取消' : '开始修改' }}
					</el-button>
					<el-button type="primary" @click="updateDepartmentInformation" :disabled="!isEdit || !isFormValid"
										 v-if="isEdit" style="float: right; margin-right: 30%">
						确认修改
					</el-button>
				</el-card>
			</div>
			<!-- 修改密保功能 -->
			<div class="right-section">
				<el-card class="protection-card">
					<div slot="header" style="margin-bottom: 30px">
						修改密保问题
					</div>
					<el-form :model="protectionForm" label-width="100px" ref="protectionForm">
						<el-form-item label="当前密保问题">
							<el-input v-model="currentProtection.question1" disabled></el-input>
						</el-form-item>
						<el-form-item label="当前密保答案">
							<el-input v-model="currentProtection.answer1" disabled></el-input>
						</el-form-item>
						<el-form-item label="新密保问题">
							<el-input v-model="protectionForm.question1"></el-input>
						</el-form-item>
						<el-form-item label="新密保答案">
							<el-input v-model="protectionForm.answer1"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="changeProtection" :disabled="!isQuestionValid">确认修改</el-button>
						</el-form-item>
					</el-form>
					<el-alert v-if="protectionChangeResult" :title="protectionChangeResult.message" type="success"
										show-icon></el-alert>
				</el-card>
				<el-card class="password-card">
					<div slot="header" style="margin-bottom: 30px">
						修改密码
					</div>
					<el-form :model="passwordForm" label-width="100px" ref="passwordForm">
						<el-form-item label="新密码" prop="password">
							<el-input type="password" v-model="passwordForm.password"></el-input>
						</el-form-item>
						<el-form-item label="确认新密码" prop="confirmPassword">
							<el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="changePassword" :disabled="!isPasswordValid">确认修改</el-button>
						</el-form-item>
					</el-form>
					<el-alert v-if="passwordChangeResult" :title="passwordChangeResult.message" type="success"
										show-icon></el-alert>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {ElMessage} from 'element-plus';
import AxiosService from '@/plugins/Axios.js';
import CryptoJS from 'crypto-js';

export default {
	data() {
		return {
			isEdit: false,
			departmentInfo: null,
			currentProtection: {
				question1: '',
				answer1: '',
			},
			passwordForm: {
				password: '',
				confirmPassword: '',
			},
			protectionForm: {
				question1: '',
				answer1: '',
			},
			passwordChangeResult: null,
			protectionChangeResult: null,
			CurrentDepartment2: []
		};
	},
	computed: {
		...mapState(['CurrentDepartment']), ...mapMutations(['setDepartment']),
		isFormValid() {
			return this.departmentInfo.dname !== '' && this.departmentInfo.dpassword !== '' && this.departmentInfo.dmanager !== '' && this.departmentInfo.dphone !== '';
		},
		isPasswordValid() {
			return this.passwordForm.password !== '' && this.passwordForm.confirmPassword !== '';
		},
		isQuestionValid() {
			return this.protectionForm.question1 !== '' && this.protectionForm.answer1 !== '';
		},
	},
	watch: {
		CurrentDepartment2: {
			immediate: true,
			handler(newValue) {
				this.departmentInfo = newValue;
				this.currentProtection = {
					question1: newValue.problem,
					answer1: newValue.text,
				};
			},
		},
	},
	methods: {
		updateDepartmentInformation() {
			this.isEdit = !this.isEdit;
			this.CurrentDepartment2 = this.departmentInfo;
			this.updateDepartmentInfo();
		},
		updateDepartmentInfo() {
			this.CurrentDepartment2 = this.departmentInfo;
			const change =AxiosService.updateDepartment(this.departmentInfo)
			if (change) {
				ElMessage.success('修改成功');
			}
		},
		changePassword() {

			if (this.passwordForm.password !== this.passwordForm.confirmPassword) {
				ElMessage.error("click")
				this.passwordChangeResult = {
					code: 1,
					message: '两次输入的密码不一致',
				};
			} else {
				this.departmentInfo.dpassword = CryptoJS.MD5(this.passwordForm.password).toString();
				this.passwordForm={
					password: '',
					confirmPassword: ''
				}
				this.updateDepartmentInfo();
			}
		},
		changeProtection() {
			if (this.protectionForm.question1 !== '' && this.protectionForm.answer1 !== '') {
				this.currentProtection = {
					question1: this.protectionForm.question1,
					answer1: this.protectionForm.answer1,
				};
				this.departmentInfo.problem = this.protectionForm.question1;
				this.departmentInfo.text = this.protectionForm.answer1;
				this.updateDepartmentInfo();
				this.protectionForm = {
					question1: '',
					answer1: '',
				};
			} else {
				ElMessage.error("请输入问题和答案！");
			}
		},
		async fetchDepartment(id) {
			try {
				this.departmentInfo = await AxiosService.fetchDepartment(id);
				this.CurrentDepartment2 = this.departmentInfo;
			} catch (error) {
				console.error('查询部门失败:', error);
			}
		},
	},
	created() {
		this.CurrentDepartment2 = this.CurrentDepartment
		this.departmentInfo = this.CurrentDepartment2
	},
	mounted() {
		this.fetchDepartment(this.$route['params'].id);
	}
};
</script>

<style scoped>
.department-management {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.left-section, .right-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.info-card {
	padding: 20px;
}

.protection-card, .password-card {
	padding: 20px;
}

.avatar {
	display: block;
	margin: 0 auto 20px;
}
</style>
